<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>info</title>
    <link rel="shortcut icon" type="image/x-icon" href="__STATIC__/img/info.ico">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: url("__STATIC__/img/bg.png");
        }

        header {

        }

        nav {
            width: 100%;
            height: 55px;
            /*background-color: #54a0ff;*/
            color: gray;
            font-family: 宋体;
            font-size: 24px;
            /*box-shadow: 3px 3px 3px #54a0ff;*/
        }

        .title {
            width: 93%;
            margin: auto;
            line-height: 55px;
            /*border-left: #E3E3E3 solid 4px;*/
        }

        form {
            width: 24%;
            margin: 100px auto 50px;
        }


        .table {
            display: none;
            width: 70%;
            margin: auto;
        }

        .student_info {
            width: 70%;
            margin: auto;
        }

        #schoolName {
            list-style: none;
            display: none;
            text-align: center;
        }

        #schoolData {
            margin: 15px;
            cursor: pointer;
        }

        #schoolData:hover {
            cursor: pointer;
            transform: scale(1.1);
            transition: all 0.5s;
            color: #000;
        }

        ul {
            width: 100%;
            height: 220px;
            overflow: auto;
            list-style: none;
            display: none;
            text-align: center;
            background-color: rgba(98,98,98,.1);
        }

        #class-list {
            width: 100%;
            height: 70px;
            overflow: auto;
            list-style: none;
            display: none;
            text-align: center;
            background-color: rgba(98,98,98,.1);
        }

        li {
            padding: 8px;
            cursor: pointer;
        }

        /*li:hover {*/
            /*transform: scale(1.2);*/
            /*transition: all 0.5s;*/
            /*color: #000;*/
        /*}*/

        a {
            color: black;
        }

        a:hover {
            text-decoration: none;
        }

        .sig {
            position: relative;
            color: darkgray;
            text-align: center;
            margin: 20px auto;
        }

        /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
        ::-webkit-scrollbar
        {
            width: 4px;
            height: 4px;
            background-color: #F5F5F5;
        }

        /*定义滚动条轨道 内阴影+圆角*/
        ::-webkit-scrollbar-track
        {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
            border-radius: 10px;
            background-color: #F5F5F5;
        }

        /*定义滑块 内阴影+圆角*/
        ::-webkit-scrollbar-thumb
        {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
            background-color: #54a0ff;
        }
    </style>
</head>
<body>
<header>
    <nav>
        <p class="title">校园信息查询系统</p>
    </nav>
</header>
<article>
    <section>
        <form action="" method="post">
            <div class="form-group">
                <label for="school">请输入学校：</label>
                <input type="text" class="form-control dropdown-toggle" data-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="false" id="school" placeholder="西南民族大学">
                <ul id="school-list">
                    {volist name="data1" id="da"}
                    <li id="{$da.id}-list" class="selectSchool">{$da.school}</li>
                    {/volist}
                </ul>
            </div>
            <div class="form-group">
                <label id="label2" for="college" style="display: none">请输入学院：</label>
                <input type="text" class="form-control" id="college" style="display: none" placeholder="计算机科学与技术学院">
                <ul id="college-list">
                    {volist name="data3" id="da"}
                    <li class="selectCollege">{$da.college}</li>
                    {/volist}
                </ul>
            </div>
            <div class="form-group">
                <label id="label3" for="major" style="display: none">请输入专业：</label>
                <input type="text" class="form-control" id="major" style="display: none" placeholder="网络工程">
                <ul id="major-list">
                    {volist name="data4" id="da"}
                    <li class="selectMajor">{$da.major}</li>
                    {/volist}

                </ul>
            </div>
            <div class="form-group">
                <label id="label4" for="class" style="display: none">请输入班级：</label>
                <input type="text" class="form-control" id="class" style="display: none" placeholder="网工1601">
                <ul id="class-list">
                    {volist name="data5" id="da"}
                    <li class="selectClass">{$da.class}</li>
                    {/volist}
                </ul>
            </div>
        </form>

        <table class="table table-striped table-hover table-condensed">
            <tr id="student-list">
                <th class="active">#</th>
                <th class="active">name</th>
                <th class="active">school</th>
                <th class="active">college</th>
                <th class="active">major</th>
            </tr>

        </table>

        <table class="table table-striped table-hover table-condensed" id="table-list1">
            <tr id="student-list1">
                <th class="active">name</th>
            </tr>
        </table>

        <table class="table table-striped table-hover table-condensed" id="table-list2">
            <tr id="student-list2">
                <th class="active">name</th>
            </tr>
        </table>

        <div id="member">

        </div>

    </section>
</article>

 <footer>
    <p class="sig"><span>Copyright &copy; 2018 By Akashi_Sai</span></p>
</footer>

<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {
        //监听学校输入框点击事件
        $('#school').click(function () {
            $('#school-list').slideToggle();
            $('#college, #label2').slideUp();
            $('#college-list').slideUp();
            $('#major, #label3').slideUp();
            $('#major-list').slideUp();
            $('#class, #label4').slideUp();
            $('#class-list').slideUp();
            $('#table-list1').slideUp();
            $('#table-list2').slideUp();
            $('table').slideUp();
        });
        //监听输入框键盘输入事件
        $('#school').keyup(function () {
            // var t = $('#school').val();
            var reg = new RegExp($('#school').val());
            // var reg = /西南民族/g;
            var li = $('#school-list li');
            // $('#school-list li').remove();
            $('#school-list li').each(function (index) {
                // console.log(li[index].innerText);
                // console.log(this.innerText);
                if (reg.test(li[index].innerText)) {
                    $(this).show();
                    console.log('true!');
                } else {
                    $(this).hide();
                    console.log('false!');
                }
            });
        });
        $('#college').keyup(function () {
            console.log($('#college').val());

        });
        $('#major').keyup(function () {
            console.log($('#major').val());
        });

        //监听li标签鼠标移动的颜色变化
        $('li').mouseover(function () {
            $(this).css('background-color', '#54a0ff');
        });
        $('li').mouseout(function () {
            $(this).css('background-color', 'rgba(98,98,98,.03)');
        });

        //监听学校选择框点击事件
        $('.selectSchool').click(function () {
            var val = $(this).html();
            // console.log(val);
            $('#school').val(val);
            $('#school-list').slideToggle();
            $('#college, #label2').slideToggle();
        });

        //监听学院输入框点击事件
        $('#college').click(function () {
            $('#college-list').slideToggle();
            $('#major, #label3').slideUp();
            $('#major-list').slideUp();
            $('#class, #label4').slideUp();
            $('#class-list').slideUp();
            $('#table-list1').slideUp();
            $('#table-list2').slideUp();
            $('table').slideUp();
        });
        //监听学院选择框点击事件
        $('.selectCollege').click(function () {
            var val = $(this).html();
            // console.log(val);
            $('#college').val(val);
            $('#college-list').slideToggle();
            $('#major, #label3').slideToggle();
        });
        //监听专业输入框点击事件
        $('#major').click(function () {
            $('#major-list').slideToggle();
            $('#class, #label4').slideUp();
            $('#class-list').slideUp();
            $('#table-list1').slideUp();
            $('#table-list2').slideUp();
            $('table').slideUp();
        });
        //监听专业选择框点击事件
        $('.selectMajor').click(function () {
            var val = $(this).html();
            // console.log(val);
            $('#major').val(val);
            $('#major-list').slideToggle();
            $('#class, #label4').slideToggle();
        });
        //监听班级输入框点击事件
        $('#class').click(function () {
            $('#class-list').slideToggle();
            $('#table-list1').slideUp();
            $('#table-list2').slideUp();
            $('table').slideUp();
        });
        //监听班级选择框点击事件
        $('.selectClass').click(function () {
            var val = $(this).html();
            // console.log(val);
            $('#class').val(val);
            $('#class-list').slideToggle();
            // $('table').slideToggle();

            if (val === '网工1601') {
                $.ajax({
                    type: 'get',
                    async: false,
                    cache: false,
                    // url: '{:url("index/getTable")}',
                    // url: 'http://ec2-3-16-161-227.us-east-2.compute.amazonaws.com/course/linkage_online/ajax.php?type=5&father_id=1601',
                    url: '{:url("index/visitClass01")}',
                    success: function (res) {
                        // console.log(res);
                        var arr = [];
                        for (let i in res.class01) {
                            arr.push(res.class01[i]); //属性
                        }
                        console.log(arr);
                        for (var i = arr.length - 1; i >= 0; i--) {
                            $('#student-list1').after(
                                '<tr class="msg">' +
                                '<td class="toInfo">' + arr[i] + '</td>' +
                                '</tr>'
                            );
                        }
                        $('#table-list1').slideToggle();
                        goToInfo();
                    }
                });
            } else if (val == '网工1602') {
                $.ajax({
                    type: 'get',
                    async: false,
                    cache: false,
                    dataType: 'json',
                    url: '{:url("index/visitClass02")}',
                    // url:'http://ec2-3-16-161-227.us-east-2.compute.amazonaws.com/course/linkage_online/ajax.php?type=5&father_id=1602',
                    success: function (res) {
                        // console.log(res);
                        var arr = [];
                        for (let i in res.class02) {
                            arr.push(res.class02[i]); //属性
                        }
                        // console.log(arr);
                        for (var i = arr.length - 1; i >= 0; i--) {
                            $('#student-list2').after(
                                '<tr class="msg">' +
                                '<td class="toInfo">' + arr[i] + '</td>' +
                                '</tr>'
                            );
                        }
                        $('#table-list2').slideToggle();
                        goToInfo();
                    }
                });
            }
        });
        function goToInfo() {
            $('.toInfo').click(function () {
                $.ajax({
                    type: 'get',
                    async: false,
                    cache: false,
                    dataType: 'json',
                    url: '{:url("index/visitMember22")}',
                    success:function (res) {
                        // console.log(res);
                        $('#member').append(
                            res
                        );
                        $('.email').click(function () {
                            var val = $(this).html().split(": ");
                            console.log(val[1]);
                            var text = val[1];
                            var reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
                                if(reg.test(text)) {
                                    console.log('true');
                                } else {
                                    console.log('false');
                                }
                        });
                    }
                });
            });

        }

    });
</script>
</body>
</html>